<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one div{
            background: #d3d3d3;
            margin: 10px 0px;
        }
        .one div p{
            margin: 0px;
            background: #d3d3d3;
        }
        textarea{
            overflow-y: scroll;
            resize: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            initinfo();
            save();
        })
        function initinfo(){
            $.ajax({
                url:"getInformationsbyid"+location.search,
                dataType:"json",
                async:false,
                success:function (Informations){
                    $(".title").html(Informations.title)
                    $(".reporttime").html(Informations.reporttime)
                    $(".content").html(Informations.content)
                    $("[name=infoid]").val(Informations.id)
                }
            })
            $(".one div").remove();
            $.ajax({
                url:"getInformationsbyinfoid",
                data:{
                    infoid:$("[name=infoid]").val()
                },
                dataType:"json",
                async:false,
                success:function (list){
                    $(list).each(function (i,Replies){
                        var div=$("<div></div>")
                        var p1=$("<p>发表与："+Replies.replytime+"</p>")
                        var p2=$("<p>"+Replies.content+"</p>")
                        div.append(p1,p2)
                        $(".one").append(div)
                    })
                }
            })
        }
        function save(){
            $(".save").click(function (){
                var content=$("[name=content]").val();
                if (content==""||null){
                    alert("回复不能为空！！！")
                    return false;
                }
                else if (content.length>200){
                    alert("回复字数超出！！！")
                    return false;
                }
                else {
                    $.ajax({
                        url:"addreplies",
                        data: $("form").serialize(),
                        success:function (re){
                            if(re.trim()=="ok"){
                                alert("回复成功！")
                                $("[name=content]").val("")
                                initinfo();
                            }else {
                                alert("回复失败！")
                            }
                        }
                    })
                }
            })
        }
    </script>
</head>
<body>
<div class="father">
    <div class="head">
        <h1 class="title"></h1>
        <p>发表于：<span class="reporttime"></span></p>
        <p><span class="content"></span></p>
        <h2>读者回应</h2>
    </div>
    <div class="one">
    </div>
    <div class="two">
        <p>快速回复（字数200字以内）：</p>
        <form>
            <input type="text" name="infoid" hidden>
            <textarea name="content" cols="30" rows="5" ></textarea><br>
            <input type="button" class="save" value="提交">
            <a href="/toshow">返回首页</a>
        </form>
    </div>

</div>
</body>
</html>